311. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2023-03-13 03:01:19 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

311.1 Files compared

#LocationFileLast Modified
1Porto v4.0.4/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module_minicart.less2021-02-15 04:16:32 +0000
2Porto v4.0.5/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module_minicart.less2023-02-14 08:55:23 +0000

311.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged5786
Changed12
Inserted3109
Removed00

311.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

311.4 Active regular expressions

No regular expressions were active.

311.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5  5 
6 // 6 //
7 //  Variables 7 //  Variables
8 //  _____________________________________________ 8 //  _____________________________________________
9  9 
10 @minicart__padding-horizontal: @indent__base; 10 @minicart__padding-horizontal: @indent__base;
11  11 
12 @minicart-qty__height: 24px; 12 @minicart-qty__height: 24px;
13  13 
14 // 14 //
15 //  Common 15 //  Common
16 //  _____________________________________________ 16 //  _____________________________________________
17  17 
18 & when (@media-common = true) { 18 & when (@media-common = true) {
19  19 
20     // 20     //
21     //  Minicart 21     //  Minicart
22     //  --------------------------------------------- 22     //  ---------------------------------------------
23  23 
24     .block-minicart { 24     .block-minicart {
25         .items-total { 25         .items-total {
26             float: left; 26             float: left;
27             .count { 27             .count {
28                 font-weight: @font-weight__bold; 28                 font-weight: @font-weight__bold;
29                 color: #000; 29                 color: #000;
30             } 30             }
31         } 31         }
32         .subtotal { 32         .subtotal {
33             text-align: right; 33             text-align: right;
34             .label { 34             .label {
35                 &:extend(.abs-colon all); 35                 &:extend(.abs-colon all);
36             } 36             }
37         } 37         }
38         .subtitle { 38         .subtitle {
39             display: none; 39             display: none;
40             &.empty { 40             &.empty {
41                 display: block; 41                 display: block;
42                 padding: 18px 0; 42                 padding: 18px 0;
43                 text-align: center; 43                 text-align: center;
44                 font-size: inherit; 44                 font-size: inherit;
45                 font-weight: 400; 45                 font-weight: 400;
46             } 46             }
    47             .minicart-offcanvas & {
    48               &.empty {
    49                 padding: 18px 20px;
    50                 text-align: right;
    51               }
    52             }
47         } 53         }
48         .text { 54         .text {
49             &.empty { 55             &.empty {
50                 text-align: center; 56                 text-align: center;
51             } 57             }
52         } 58         }
53         .block-content { 59         .block-content {
54             > .actions { 60             > .actions {
55                 > .secondary { 61                 > .secondary {
56                     text-align: center; 62                     text-align: center;
57                     margin: 0 0 15px; 63                     margin: 0 0 15px;
58                     .action { 64                     .action {
59                         &.viewcart { 65                         &.viewcart {
60                             display: block; 66                             display: block;
61                             width: 100%; 67                             width: 100%;
62                             padding: 10px 15px; 68                             padding: 10px 15px;
63                             text-transform: uppercase; 69                             text-transform: uppercase;
64                             font-size: 15px; 70                             font-size: 15px;
65                             border: 1px solid #ccc; 71                             border: 1px solid #ccc;
66                             border-radius: 3px; 72                             border-radius: 3px;
67                         } 73                         }
68                     } 74                     }
69                 } 75                 }
70                 .paypal-logo { 76                 .paypal-logo {
71                     margin-top: 15px; 77                     margin-top: 15px;
72                     text-align: center; 78                     text-align: center;
73                 } 79                 }
74             } 80             }
75         } 81         }
76         .block-category-link, 82         .block-category-link,
77         .block-product-link, 83         .block-product-link,
78         .block-cms-link, 84         .block-cms-link,
79         .block-banners { 85         .block-banners {
80             margin: 15px 0 0; 86             margin: 15px 0 0;
81             text-align: center; 87             text-align: center;
82         } 88         }
83     } 89     }
84  90 
85     .minicart-wrapper { 91     .minicart-wrapper {
86         .lib-dropdown( 92         .lib-dropdown(
87             @_toggle-selector: ~".action.showcart", 93             @_toggle-selector: ~".action.showcart",
88             @_options-selector: ~".block-minicart", 94             @_options-selector: ~".block-minicart",
89             @_dropdown-toggle-icon-content: @icon-mini-cart, 95             @_dropdown-toggle-icon-content: @icon-mini-cart,
90             @_dropdown-toggle-active-icon-content: @icon-mini-cart, 96             @_dropdown-toggle-active-icon-content: @icon-mini-cart,
91             @_dropdown-list-item-padding: false, 97             @_dropdown-list-item-padding: false,
92             @_dropdown-list-item-hover: false, 98             @_dropdown-list-item-hover: false,
93             @_dropdown-list-margin-top: 7px, 99             @_dropdown-list-margin-top: 7px,
94             @_dropdown-list-border: 0, 100             @_dropdown-list-border: 0,
95             @_dropdown-list-pointer-position-top: -21px, 101             @_dropdown-list-pointer-position-top: -21px,
96             @_icon-font-position: before, 102             @_icon-font-position: before,
97             @_icon-font-size: 26px, 103             @_icon-font-size: 26px,
98             @_icon-font-line-height: 33px, 104             @_icon-font-line-height: 33px,
99             @_icon-font-color: @minicart-icons-color, 105             @_icon-font-color: @minicart-icons-color,
100             @_icon-font-color-hover: @minicart-icons-color-hover, 106             @_icon-font-color-hover: @minicart-icons-color-hover,
101             @_icon-font-color-active: @minicart-icons-color 107             @_icon-font-color-active: @minicart-icons-color
102         ); 108         );
103         .block-minicart { 109         .block-minicart {
104             .lib-css(padding, 15px @minicart__padding-horizontal); 110             .lib-css(padding, 15px @minicart__padding-horizontal);
105             width: 300px; 111             width: 300px;
106             left: 0; 112             left: 0;
107             color: #222529; 113             color: #222529;
108             top: 100%; 114             top: 100%;
109             margin-top: 13px; 115             margin-top: 13px;
110             box-shadow: 0 5px 8px rgba(0,0,0,.15); 116             box-shadow: 0 5px 8px rgba(0,0,0,.15);
111             .block-title { 117             .block-title {
112                 display: none; 118                 display: none;
113             } 119             }
114             &:before, &::after {display: none;} 120             &:before, &::after {display: none;}
115         } 121         }
116         .product { 122         .product {
117             .actions { 123           .actions {
118                 > .primary, 124             > .primary,
119                 > .secondary { 125             > .secondary {
120                     display: inline; 126                 display: inline;
121                 } 127             }
    128             .minicart-offcanvas& {
    129               > .secondary {
    130                 left: 10px;
    131               }
    132             }
122             } 133           }
123         } 134         }
124         .action { 135         .action {
125             &.close { 136             &.close {
126                 width: 40px; 137                 width: 40px;
127                 height: 40px; 138                 height: 40px;
128                 top: 0; 139                 top: 0;
129                 left: 0; 140                 left: 0;
130                 position: absolute; 141                 position: absolute;
131                 .lib-button-reset(); 142                 .lib-button-reset();
132                 .lib-button-icon( 143                 .lib-button-icon(
133                     @icon-remove, 144                     @icon-remove,
134                     @_icon-font-color: #777, 145                     @_icon-font-color: #777,
135                     @_icon-font-size: 16px, 146                     @_icon-font-size: 16px,
136                     @_icon-font-line-height: 16px, 147                     @_icon-font-line-height: 16px,
137                     @_icon-font-text-hide: true 148                     @_icon-font-text-hide: true
138                 ); 149                 );
139             } 150             }
140             &.showcart { 151             &.showcart {
141                 white-space: nowrap; 152                 white-space: nowrap;
142                 display: flex; 153                 display: flex;
143                 align-items: center; 154                 align-items: center;
144                 position: relative; 155                 position: relative;
145                 &.active { 156                 &.active {
146                   display: flex; 157                   display: flex;
147                   align-items: center; 158                   align-items: center;
148                   .minicart-icon { 159                   .minicart-icon {
149                     &::after { 160                     &::after {
150                       content: ""; 161                       content: "";
151                       border-width: 1px 1px 0 0; 162                       border-width: 1px 1px 0 0;
152                       border-color: #f4f4f4; 163                       border-color: #f4f4f4;
153                       border-style: solid; 164                       border-style: solid;
154                       background: #fff; 165                       background: #fff;
155                       width: 14px; 166                       width: 14px;
156                       height: 14px; 167                       height: 14px;
157                       position: absolute; 168                       position: absolute;
158                       top: calc(100%); 169                       top: calc(100%);
159                       left: 50%; 170                       left: 50%;
160                       margin-top: 8px; 171                       margin-top: 8px;
161                       margin-left: -7px; 172                       margin-left: -7px;
162                       transform: rotate(-45deg); 173                       transform: rotate(-45deg);
163                       z-index: 1004; 174                       z-index: 9;
164                       animation: arrowFadeInDown .2s ease-out; 175                       animation: arrowFadeInDown .2s ease-out;
165                     } 176                     }
166                   } 177                   }
167                 } 178                 }
168                 .minicart-icon { 179                 .minicart-icon {
169                   font-size: 26px; 180                   font-size: 26px;
170                   position: relative; 181                   position: relative;
171                   &::before {margin: 0;} 182                   &::before {margin: 0;}
172                 } 183                 }
173                 .text { 184                 .text {
174                     &:extend(.abs-visually-hidden all); 185                     &:extend(.abs-visually-hidden all);
175                 } 186                 }
176                 .counter.qty { 187                 .counter.qty {
177                     color: @minicart__qty_color; 188                     color: @minicart__qty_color;
178                     position: absolute; 189                     position: absolute;
179                     left: 18px; 190                     left: 18px;
180                     top: -5px; 191                     top: -5px;
181                     font-size: 10px; 192                     font-size: 10px;
182                     font-weight: 600; 193                     font-weight: 600;
183                     text-align: center; 194                     text-align: center;
184                     width: 16px; 195                     width: 16px;
185                     height: 16px; 196                     height: 16px;
186                     line-height: 16px; 197                     line-height: 16px;
187                     border-radius: 8px; 198                     border-radius: 8px;
188                     overflow: hidden; 199                     overflow: hidden;
189                     color: #fff; 200                     color: #fff;
190                     background-color: #ff5b5b; 201                     background-color: #ff5b5b;
191                     padding: 0; 202                     padding: 0;
192                     .loader { 203                     .loader {
193                         > img { 204                         > img {
194                             .lib-css(max-width, @minicart-qty__height); 205                             .lib-css(max-width, @minicart-qty__height);
195                         } 206                         }
196                     } 207                     }
197                 } 208                 }
198                 .counter-label { 209                 .counter-label {
199                     &:extend(.abs-visually-hidden all); 210                     &:extend(.abs-visually-hidden all);
200                 } 211                 }
201                 &:before, &.active:before { 212                 &:before, &.active:before {
202                     color: @minicart__icon_color; 213                     color: @minicart__icon_color;
203                     line-height: 40px; 214                     line-height: 40px;
204                     margin: 0; 215                     margin: 0;
205                     display: none; 216                     display: none;
206                 } 217                 }
207                 &:hover:before, &:active:before, &.active:before, &.active:hover:before { 218                 &:hover:before, &:active:before, &.active:before, &.active:hover:before {
208                     color: @minicart__icon_color; 219                     color: @minicart__icon_color;
209                 } 220                 }
210                 &::after { 221                 &::after {
211                   content: "\e81c"; 222                   content: "\e81c";
212                   font-family: 'porto-icons'; 223                   font-family: 'porto-icons';
213                   font-size: 17px; 224                   font-size: 17px;
214                   margin-right: 15px; 225                   margin-right: 15px;
215                   display: block; 226                   display: block;
216                 } 227                 }
217             } 228             }
218         } 229         }
219         .minicart-widgets { 230         .minicart-widgets {
220             padding: 0 10px 0; 231             padding: 0 10px 0;
221         } 232         }
    233         &.minicart-offcanvas{
    234           .action {
    235             &.showcart {
    236               &.active {
    237                 .minicart-icon {
    238                   &::after {display: none;}
    239                 }
    240               }
    241             }
    242           }
    243           &.active {
    244             .minicart-overlay {
    245                 display: block;
    246             }
    247             .block-minicart {transform: translateX(0);}
    248           }
    249           > .mage-dropdown-dialog {display: block !important;}
    250           .block-minicart {
    251             transform: translateX(-105%);z-index: 1025;transition: transform 0.35s;position: fixed;top: 0;height: 100%;left: 0 !important; right: auto !important;width: 320px;min-width: auto;margin: 0;
    252             padding-left: 0;
    253             padding-right: 0;
    254             > div {
    255               height: 100%;
    256               display: flex;
    257               flex-direction: column;
    258             }
    259             .block-title {
    260               display: block;
    261               padding: 10px 20px;
    262               margin: 0;
    263               flex: 0 0 auto;
    264               .qty {
    265                 display: none;
    266               }
    267             }
    268             .total-count,li,.subtotal,.block-content > .actions,.minicart-widgets {
    269                 padding-left: 20px;
    270                 padding-right: 20px;
    271             }
    272           }
    273           .minicart-overlay {
    274             position: fixed;
    275             z-index: 1023;
    276             left: 0;
    277             top: 0;
    278             bottom: 0;
    279             right: 0;
    280             background: rgba(0,0,0,0.4);
    281             display: none;
    282             svg {
    283                 position: absolute;
    284                 top: 10px;
    285                 left: 330px;
    286                 width: 1.5rem;
    287                 height: 1.5rem;
    288                 cursor: pointer;
    289             }
    290           }
    291           .block-content {
    292               display: flex;
    293               flex-direction: column;
    294               height: 100%;
    295               flex: 1 1 100%;
    296               .minicart-items-wrapper {
    297                   max-height: inherit;
    298                   flex: 1 1 100%;
    299                   height: 100% !important;
    300                   overflow: auto;
    301                   position: relative;
    302                   .minicart-items {
    303                     position: absolute;
    304                     top: 0;
    305                     right: 0;
    306                     bottom: 0;
    307                     padding: 0;
    308                     left: 0;
    309                     max-height: 100%;
    310                     list-style: none;
    311                     overflow: hidden;
    312                     overflow-y: auto;
    313                     -webkit-overflow-scrolling: touch;
    314                     scrollbar-width: thin;
    315                     &::-webkit-scrollbar {
    316                         width: 5px;
    317                     }
    318                     &::-webkit-scrollbar-track {
    319                         background-color: rgba(0,0,0,.05);
    320                     }
    321                     &::-webkit-scrollbar-thumb {
    322                         background-color: rgba(0,0,0,.12);
    323                     }
    324                   }
    325               }
    326               .subtotal {
    327                   flex: 0 0 auto;
    328               }
    329           }
    330         }
222     } 331     }
223     .cart-design-2 { 332     .cart-design-2 {
224       .action { 333       .action {
225         &.showcart { 334         &.showcart {
226           .minicart-icon { 335           .minicart-icon {
227             width: 25px; 336             width: 25px;
228             height: 20px; 337             height: 20px;
229             border: 2px solid #222529; 338             border: 2px solid #222529;
230             border-radius: 0 0 5px 5px; 339             border-radius: 0 0 5px 5px;
231             position: relative; 340             position: relative;
232             opacity: 1; 341             opacity: 1;
233             margin: 6px 3px 0; 342             margin: 6px 3px 0;
234             font-size: 32px; 343             font-size: 32px;
235             &::before { 344             &::before {
236               content: ''; 345               content: '';
237               position: absolute; 346               position: absolute;
238               border: 2px solid; 347               border: 2px solid;
239               border-color: inherit; 348               border-color: inherit;
240               border-bottom: none; 349               border-bottom: none;
241               border-radius: 10px 10px 0 0; 350               border-radius: 10px 10px 0 0;
242               left: 50%; 351               left: 50%;
243               top: -8px; 352               top: -8px;
244               margin-left: -7.5px; 353               margin-left: -7.5px;
245               width: 15px; 354               width: 15px;
246               height: 11px; 355               height: 11px;
247             } 356             }
248           } 357           }
249         } 358         }
250       } 359       }
251     } 360     }
252     .minicart-items-wrapper { 361     .minicart-items-wrapper {
253         overflow-x: auto; 362         overflow-x: auto;
254     } 363     }
255  364 
256     .minicart-items { 365     .minicart-items {
257         .lib-list-reset-styles(); 366         .lib-list-reset-styles();
258         .product-item { 367         .product-item {
259             > .product { 368             > .product {
260                 &:extend(.abs-add-clearfix all); 369                 &:extend(.abs-add-clearfix all);
261             } 370             }
262         } 371         }
263         .product-image-wrapper { 372         .product-image-wrapper {
264             &:extend(.abs-reset-image-wrapper all); 373             &:extend(.abs-reset-image-wrapper all);
265         } 374         }
266         .product-item-pricing { 375         .product-item-pricing {
267             .label { 376             .label {
268                 display: inline-block; 377                 display: inline-block;
269             } 378             }
270         } 379         }
271         .price-minicart { 380         .price-minicart {
272             margin-bottom: @indent__xs; 381             margin-bottom: @indent__xs;
273         } 382         }
274         .product-item-details { 383         .product-item-details {
275             text-align: right; 384             text-align: right;
276             .price-including-tax, 385             .price-including-tax,
277             .price-excluding-tax { 386             .price-excluding-tax {
278                 margin: @indent__xs 0; 387                 margin: @indent__xs 0;
279             } 388             }
280             .weee[data-label] { 389             .weee[data-label] {
281                 .lib-font-size(11); 390                 .lib-font-size(11);
282                 .label { 391                 .label {
283                     &:extend(.abs-no-display all); 392                     &:extend(.abs-no-display all);
284                 } 393                 }
285             } 394             }
286             .details-qty { 395             .details-qty {
287                 margin-top: @indent__s; 396                 margin-top: @indent__s;
288             } 397             }
289         } 398         }
290         .product { 399         .product {
291             > .product-item-photo, 400             > .product-item-photo,
292             > .product-image-container { 401             > .product-image-container {
293                 float: right; 402                 float: right;
294                 min-width: 0; 403                 min-width: 0;
295             } 404             }
296             .toggle { 405             .toggle {
297                 &:after { 406                 &:after {
298                     position: static; 407                     position: static;
299                     margin: 0 0 0 @indent__xs; 408                     margin: 0 0 0 @indent__xs;
300                     .lib-css(color, @color-gray56); 409                     .lib-css(color, @color-gray56);
301                 } 410                 }
302                 border: 0; 411                 border: 0;
303                 padding: 0 0 @indent__xs @indent__xl; 412                 padding: 0 0 @indent__xs @indent__xl;
304             } 413             }
305             .product.options { 414             .product.options {
306                 > .toggle { 415                 > .toggle {
307                     &:after { 416                     &:after {
308                         font-family: @icon-font-family; 417                         font-family: @icon-font-family;
309                     } 418                     }
310                     .lib-icon-font-symbol( 419                     .lib-icon-font-symbol(
311                         @_icon-font-content: @icon-down, 420                         @_icon-font-content: @icon-down,
312                         @_icon-font-position: after 421                         @_icon-font-position: after
313                     ); 422                     );
314                 } 423                 }
315                 &.active { 424                 &.active {
316                     > .toggle { 425                     > .toggle {
317                         .lib-icon-font-symbol( 426                         .lib-icon-font-symbol(
318                             @_icon-font-content: @icon-up, 427                             @_icon-font-content: @icon-up,
319                             @_icon-font-position: after 428                             @_icon-font-position: after
320                         ); 429                         );
321                     } 430                     }
322                 } 431                 }
323             } 432             }
324             &.pricing { 433             &.pricing {
325                 margin-top: 3px; 434                 margin-top: 3px;
326             } 435             }
327             &.options { 436             &.options {
328                 .tooltip.toggle { 437                 .tooltip.toggle {
329                     .lib-icon-font( 438                     .lib-icon-font(
330                         @icon-down, 439                         @icon-down,
331                         @_icon-font-size: 12px, 440                         @_icon-font-size: 12px,
332                         @_icon-font-line-height: 12px, 441                         @_icon-font-line-height: 12px,
333                         @_icon-font-text-hide: true, 442                         @_icon-font-text-hide: true,
334                         @_icon-font-margin: -3px 7px 0 0, 443                         @_icon-font-margin: -3px 7px 0 0,
335                         @_icon-font-position: after 444                         @_icon-font-position: after
336                     ); 445                     );
337                 } 446                 }
338                 .details { 447                 .details {
339                     display: none; 448                     display: none;
340                 } 449                 }
341             } 450             }
342         } 451         }
343         .details-qty, 452         .details-qty,
344         .price-minicart { 453         .price-minicart {
345             .label { 454             .label {
346                 &:extend(.abs-colon all); 455                 &:extend(.abs-colon all);
347             } 456             }
348         } 457         }
349         .item-qty { 458         .item-qty {
350             width: 40px; 459             width: 40px;
351             text-align: center; 460             text-align: center;
352             margin-left: @indent__s; 461             margin-left: @indent__s;
353             border-radius: 3px; 462             border-radius: 3px;
354         } 463         }
355         .update-cart-item { 464         .update-cart-item {
356             vertical-align: top; 465             vertical-align: top;
357             .lib-font-size(11); 466             .lib-font-size(11);
358         } 467         }
359         .subtitle { 468         .subtitle {
360             display: none; 469             display: none;
361         } 470         }
362     } 471     }
363  472 
364 } 473 }
365  474 
366 // 475 //
367 //  Mobile 476 //  Mobile
368 //  _____________________________________________ 477 //  _____________________________________________
369  478 
370 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) { 479 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
371     .minicart-wrapper .block-minicart { 480     .minicart-wrapper .block-minicart {
372         width: 290px; 481         width: 290px;
373     } 482     }
374 } 483 }
375  484 
376  485 
377  486 
378 // 487 //
379 //  Desktop 488 //  Desktop
380 //  _____________________________________________ 489 //  _____________________________________________
381  490 
382 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { 491 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
383     .minicart-wrapper { 492     .minicart-wrapper {
384         .block-minicart { 493         .block-minicart {
385             right: auto; 494             right: auto;
386         } 495         }
387     } 496     }
388     .minilist .action.delete, 497     .minilist .action.delete,
389     .minicart-wrapper .action.edit { 498     .minicart-wrapper .action.edit {
390         .lib-icon-font-size( 499         .lib-icon-font-size(
391             @_icon-font-size: 16px 500             @_icon-font-size: 16px
392         ); 501         );
393     } 502     }
394 } 503 }